<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>李博 190304375</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  .nav {
    height: 197.56px;
    width: 95%;
    position: absolute;
    left: 2.5%;
    top: 220px;
    overflow: hidden;
    text-align: center;
  }

  .nav .hang {
    display: flex;
    width: 100%;
  }

  .nav .hang .lie:nth-child(1) {

    flex: 31%;
  }

  .nav .hang .lie {
    flex: 23%;
    border-right: 1px solid #fff;
    line-height: 66.19px;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
  }

  .nav .hang .lie:last-child {
    border: none;
  }

  .nav .hang {
    border-top-color: #fff;
    border-bottom-color: #fff;
  }

  .b {
    margin: 1px 0;
  }

  .nav .hang a {
    text-decoration: none;
    color: #fff;
  }

  .nav .hang .lie:first-child {
    padding-left: 12px;
    text-align: left;
  }

  .nav .a .lie:last-child {
    flex: 46%; 
 
    background: linear-gradient(to right, #ffbc49, #ffd252);
    text-align: center;
  }

  .nav .a .lie .qw {
    color: sienna;
  }

  .nav .a {
    border-bottom: 1px solid #fff;
    background: linear-gradient(to right, #fa5956, #fb8650 54%);
  }

  .nav .b {
    background: linear-gradient(to right, #6666ff, #6699ff);
  }

  .nav .c {
    border-top: 1px solid #fff;
    background: linear-gradient(to right, #34c2aa, #6cd557);
  }

  .nav .a .ab {
    background-image: url("./img/4.1.1.png");
    background-size: 73px auto;
    background-position: right bottom;
    background-repeat: no-repeat;
  }

  .nav .a .bc {
    background-image: url(./img/4.1.2.png);
    background-size: 37px auto;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  .nav .a .cd{
        background-image: url(./img/4.1.3.png);
        background-size: 80px auto;
        background-position:right bottom;
    background-repeat: no-repeat; 
 
      }
  .nav .b .ab {
    background-image: url(./img/4.2.1.png);
    background-size: 79px auto;
    background-position: right bottom;
    background-repeat: no-repeat;
  }

  .nav .b .bc {
    background-image: url(./img/4.2.2.png);
    background-size: 37px auto;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  .nav .c .ab {
    background-image: url(./img/4.3.1.png);
    background-size: 94px auto;
    background-position: right bottom;
    background-repeat: no-repeat;
  }

  .nav .c .bc {
    background-image: url(./img/4.2.2.png);
    background-size: 61px auto;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  .good {
    width: 100%;
    height: 44px;
    position: absolute;
    bottom: 1;
    background-image: linear-gradient(#778899,#E6E6FA);
  }

  .good1 {
    height: 28px;
    width: 85%;
    border-radius: 15px;
    display: flex;
    position: absolute;
    left: 2.5%;
    top: 6px;
    background: url("img/1.1.png") 15px 5px no-repeat;
    background-color: #fff;
  }

  .imgs {
    width: 100%;
    height: 197.38px;
  }

  .into {
    width: 95%;
    height: 64px;
    background-color: white;
    position: absolute;
    left: 2.5%;
    top: 150px;
    border-radius: 10px;
  }

  .pimh {
    width: 20%;
    height: 52px;
    float: left;
    font-size: 14px;
  }

  .into span {
    position: absolute;
    top: 38px;
  }
/* 第一个 */
  .into .qw {
    text-align: center;
    position: absolute;
    left: 1%;
    color: #222222;
  }
  .into .a{
    background: url("./img/2.png") 11px -3px no-repeat;
  }
/* 第二个 */
.into .qa {
    text-align: center;
    position: absolute;
    left: 21%;
    color: #222222;
  }
  .into .b{
    background: url("img/2.png") 10px -54px no-repeat;
  }
/* 第三个 */
.into .qb {
    text-align: center;
    position: absolute;
    left: 44%;
    color: #222222;
  }
  .into .c{
    background: url("img/2.png") 10px -103px no-repeat;
  }
/* 第四个 */
.into .qc {
    text-align: center;
    position: absolute;
    left: 64%;
    color: #222222;
  }
  .into .d{
    background: url("img/2.png") 12px -155px no-repeat;
  }
/* 第五个 */
.into .qd {
    text-align: center;
    position: absolute;
    left: 83%;
    color: #222222;
  }
  .into .e{
    background: url("img/2.png") 12px -203px no-repeat;
  }
  /* 搜索框 */
  .good .ty{
        width: 10%;
         height: 44px;
         /* float: right; */
         position: absolute;
    right: 2.5%;
    background: url("img/1.1.png") 10px -30px no-repeat;
  }
  .good span{
    font-size: 12px;
    text-align: center;
    position: absolute;
    left:25%;
    top: 32px;
    color: #222222;
  }
   /* 倒数第二大框架 */
  .hh{
            width:95%;
            height: 100px;
            position: absolute;
    left: 2.5%;
    top: 425px;
    display: flex;
    flex-wrap: wrap;
  justify-content: space-between;
  /* background-color: pink; */
        }
        .hh .qaz{
           /* flex: 1; */
           width: 19%;
            height:50px;
            /* min-width: 19%;  */
            text-align: center;
        }
        .hh a{
            text-decoration: none;
        }
        .hh span{
            font-size: 12px;
            color: #000;
        }
        /* 第一个 */
        .hh .k span{
            position: absolute;
            left: 4%;
           top: 38px;
        }
        .hh .k{
    background: url("./img/3.png") 14px 6px no-repeat;
  }
        
        /* 第二个 */
        .hh .b span{
            position: absolute;
            left: 20.5%;
           top: 38px;
        }
        .hh .b{
    background: url("./img/3.png") 14px -35.5px no-repeat;
  }
        /* 第三个 */
        .hh .c span{
            position: absolute;
            left: 43%;
           top: 38px;
        }
        .hh .c{
    background: url("./img/3.png") 14px -75.5px no-repeat;
        }
        /* 第四个 */
        .hh .d span{
            position: absolute;
            left: 62.5%;
           top: 38px;
        }
        .hh .d{
    background: url("./img/3.png") 14px -115px no-repeat;
        }
        /* 第五个 */
        .hh .e span{
            position: absolute;
            left: 83.5%;
           top: 38px;
        }
        .hh .e{
    background: url("./img/3.png") 14px -157px no-repeat;
        }
        /* 第六个 */
        .hh .f span{
            position: absolute;
            left: 2.5%;
           top: 88px;
        }
        .hh .f{
    background: url("./img/3.png") 14px -195px no-repeat;
        }
        /* 第七个 */
        .hh .g span{
            position: absolute;
            left: 24.5%;
           top: 88px;
        }
        .hh .g{
    background: url("./img/3.png") 14px -235px no-repeat;
        }
        /* 第八个 */
        .hh .h span{
            position: absolute;
            left: 42.5%;
           top: 88px;
        }
        .hh .h{
    background: url("./img/3.png") 14px -275px no-repeat;
        }
        /* 第九个 */
        .hh .i span{
            position: absolute;
            left: 67%;
           top: 88px;
        }
        .hh .i{
    background: url("./img/3.png") 14px -315px no-repeat;
        }
        /* 第十个 */
        .hh .j span{
            position: absolute;
            left: 87%;
           top: 88px;
        }
        .hh .j{
    background: url("./img/3.png") 14px -357px no-repeat;
        }
        .purprose {
          height: 60px;
          border-top: 1px solid rgb(226, 30, 30);
        
          margin-top: 340px;
          border-bottom: 1px solid rgb(226, 30, 30);
        }
      .purprose img {
        width: 25px;
        height: 25px;
        text-align: center;
      position: relative;
      left: 30px;
       
      }
     .purprose a {
      padding-left: 30px;
       font-size: 10px;
       color: #232323;
       text-decoration: none;
     }
     .purprose #a {
       position: relative;
      top: 25px;
     }
     .purprose #b {
       position: relative;
      top: 25px;
     }
     .purprose #c {
       position: relative;
      top: 25px;
     }
    .season {
      
      text-align: center;
      font-size: 10px;
      color: #5e5959;
    }
    .season span {
      padding-left: 10px;
    }
</style>

<body>
  <!-- 搜索框 -->
  <div class="good">
    <input type="search" name="search" class="good1">
    <div class="ty"><span>我的</span></div>
  </div> 
  <!-- 图片 -->
  <img class="imgs" src="./img/1.jpg">
  <!-- 表格1 -->
  <div class="into">
    <div class="pimh a"><a href="#"><span class="qw">攻略.景点</span></a></div>
    <div class="pimh b"><a href="#"><span class="qa">门票.活动</span></a></div>
    <div class="pimh c"><a href="#"><span class="qb">美食林</span></a></div>
    <div class="pimh d"><a href="#"><span class="qc">周边游</span></a></div>
    <div class="pimh e"><a href="#"><span class="qd">一日游</span></a></div>
  </div>

  <!-- 表格 -->
  <div class="nav">
    <div class="hang a">
      <div class="lie ab"><a href="#"><span>酒店</span></a></div>
      <div class="lie bc"><a href="#"><span>民宿.客栈</span></a></div>
      <div class="lie cd"><a href="#"><span class="qw">特价.爆款</span></a></div>

    </div>
    <div class="hang b">
      <div class="lie ab"><a href="#"><span>机票</span></a></div>
      <div class="lie bc"><a href="#"><span>火车票</span></a></div>
      <div class="lie"><a href="#"><span>汽车.船票</span></a></div>
      <div class="lie"><a href="#"><span>专车.租车</span></a></div>
    </div>
    <div class="hang c">
      <div class="lie ab"><a href="#"><span>旅游</span></a></div>
      <div class="lie bc"><a href="#"><span>私家团</span></a></div>
      <div class="lie"><a href="#"><span>邮轮游</span></a></div>
      <div class="lie"><a href="#"><span>定制游</span></a></div>
    </div>
  </div>
<!-- 最后大块 -->
<div class="hh">
  <div class="qaz k"><a href="#"><span>自由行</span></a></div>
  <div class="qaz b"><a href="#"><span>WiFi电话卡</span></a></div>
  <div class="qaz c"><a href="#"><span>保险.签证</span></a></div>
  <div class="qaz d"><a href="#"><span>换钞.购物</span></a></div>
  <div class="qaz e"><a href="#"><span>向导.包车</span></a></div>
  <div class="qaz f"><a href="#"><span>特价机票</span></a></div>
  <div class="qaz g"><a href="#"><span>礼品卡</span></a></div>
  <div class="qaz h"><a href="#"><span>申卡.借钱</span></a></div>
  <div class="qaz i"><a href="#"><span>社区</span></a></div>
  <div class="qaz j"><a href="#"><span>更多</span></a></div>
</div>
<div class="purprose">
  <a href=""><img src="./img/电 话.png" alt=""><span  id="a">电话预订</span></a>
  <a href="" ><img src="./img/我 的.png" alt=""><span id="b">下载客户端</span></a>
  <a href="" ><img src="./img/下载客户端.png" alt=""><span id="c">我的</span></a>
</div>
<div class="season">
  <span>网站地图</span>|<span>Language</span><span>电脑版</span><br>
  <span>C2021携程旅行</span>|<span>沪ICP备08023580号</span>
</div>
</body>

</html>